<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
                标签选择器
        */
        p {
            font-size: 30px;
        }
        /* 群组选择器*/
        span,p,div{
            color: #FFA500;
        }

        /*通配符  */
        *{
            font-weight: bold;
        }
        /*class选择器*/
        .bg{
             background-color: #EEEEEE;
        }

        /*id选择器*/
        #dv2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        /*混合选择器*/
        div.bg{
            width: 300px;
            height: 200px;
        }

    /*    子代选择器*/
        #container{
            width: 200px;
            height: 220px;
            border: 1px solid orange;
        }

        #container>div{
           color: green;
        }

        /* 后代选择器*/
        /*#container div{*/
        /*    color: green;*/
        /*}*/
    </style>
</head>
<body>
<!--
  css选择器的使用
    要给某个元素设置样式 首先需要通过css选择器选中目标位置
    css选择器的分类
    1. 标签选择器   直接写标签的名字
    2. 通配符选择器   *
    3. 类选择器    class
    4. id选择器    id   使用id时  需要保证在页面中唯一
    5. 嵌套选择器    div.bg
    6. 群组选择器    span,div,p{}
    7. 关系选择器
         7.1  子代选择器      >     div > p
         7.2  后代选择器     空格    div  p
         7.3  兄弟选择器     +  ~
    8. 属性选择器
       [属性名=属性值]
    9. 伪类伪元素选择器
-->

<p class="bg">hello world</p>
<span>hello span</span>
<div class="bg">hello div</div>
<div id="dv2" >hello div2</div>
<div class="bg">hello div3</div>

<hr>

<div id="container">
    <div>
         div1
        <div>div11</div>
        <div>div12</div>
    </div>
    <div>div2</div>
</div>

</body>
</html>